<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      button {
        display: block;
        width: 100%;
        height: 30%;
        font-size: 50px;
      }
      pre {
        font-size: 20px;
      }
    </style>
</head>
<body>
<script type="text/javascript">
var currentCallbackId = 0

function callNative(data, callback) {
  // 生成一个唯一callbackId
  var callbackId = "nativeCallback_" + (currentCallbackId++)

  // 给window添加callback
  window[callbackId] = (result) => {
    delete window[callbackId]
    callback(result)
  }

  var stringData = JSON.stringify(data)
  if (window.androidBridge) {
    // android端传递两个参数
    window.androidBridge.callNative(callbackId, stringData)
  } else {
    // iOS不支持多参数，我们传递json对象
    window.webkit.messageHandlers.iOSBridge.postMessage({
      callbackId: callbackId,
      data: stringData
    })
  }
}

function onClickButton() {
  callNative({
    name: 'mingo'
  }, (result) => {
    var logEl = document.getElementById('log')
    logEl.innerText += result + "\n"
  })
}
</script>

<!-- 打算点击按钮调用native -->
<button onclick="onClickButton()">Call Native</button>

<pre id="log">
<!-- 用于显示js的日子 -->
</pre>
</body>
</html>